<template>
  <div class="tetris-content">
    <div class="content-left">
      <div v-for="(item,index) in map" :key="index" class="left-column">
        <div v-for="(item1,index1) in item"
             :key="index1"
             class="left-row"
             :class="getCellColor(item1)"
        >

        </div>
      </div>
    </div>
    <div class="content-right">
      <div class="next-box">

      </div>
      <div class="score-box">

      </div>
      <div class="btn-box">

      </div>
    </div>
  </div>
</template>

<script>
import control from './control';
import tools from './tools';
const config = require('./config.json');
var fallDownTime;
export default {
  name: "Tetris",
  //import引入的组件需要注入到对象中才能使用",
  components: {},
  data() {
    //这里存放数据",
    return {
      map:[],
      blockList:[],
      x:0,
      y:4,
      block:[]
    };
  },
  //监听属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    getCellColor(item){
      if(item == 1) return 'black';
      return '';
    },
    getKeyPress(){
      let x = this.x,y = this.y,block = this.block,map = this.map;
      const that = this;
      document.onkeypress = e => {
        // console.log(window.event.keyCode);
        let keyCode = window.event.keyCode;
        if(keyCode == 97 && y > 0){
          // console.log('向左');
          // move('left');
        }else if(keyCode == 100 && y + block[0].length < map[0].length){
          // console.log('向右');
          // move('right');
        }else if(keyCode == 115){
          // console.log('向下');
        }else if(keyCode == 119){
          // console.log('向上');
          that.changeBlock();
        }
      }
    },
    //
    changeBlock(){
      let x = this.x,y = this.y;
      let block = this.block;
      let newblock = control.changeBlock(block);

      clearTimeout(fallDownTime);
      if(this.x + newblock.length >= this.map.length) return;
      this.reflesh(block,x,y,true);
      if(newblock.length > block.length){
        x = Math.max(x - newblock.length + block.length,0);
      }
      this.block = newblock;
      this.reflesh(newblock,x,y,false);
      this.fallDownBlock(newblock);
    },
    //初始化游戏数据
    initGame(){
      console.log("initGame");
      this.map = [...config.map];
      this.blockList = [...config.blockList];
      this.fallTime = config.fallTime;
    },
    startGame(){
      let block = this.generatorBlock();
      this.fallDownBlock(block);
    },
    //随机生成方块
    generatorBlock(){
      //随机选取
      let randomNum = tools.randomNum(0,this.blockList.length - 1);
      let block = this.blockList[randomNum];
      // block = control.changeBlock(block);
      this.block = block;
      return block;
    },
    //重新渲染页面
    reflesh(block,x,y,flag){
      let map = [...this.map];
      for(let i = 0; i < block.length; i++){
        for(let j = 0; j < block[i].length; j++){
          if(flag)  map[x + i][y + j] = 0;
          else map[x + i][y + j] = block[i][j];
        }
      }
      this.map = map;
    },
    //方块下落
    fallDownBlock(block){
      let x = this.x,y = this.y;
      this.reflesh(block,x,y,true);
      x++;
      this.x = x;
      this.reflesh(block,x,y,false);
      if(x < this.map.length - block.length){
        fallDownTime = setTimeout(()=>{
          this.fallDownBlock(block);
        },1000);
      }
    }
  },
  //生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
  beforeCreate() {

  },

  //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
  created() {
    this.initGame();
  },
  //生命周期 - 挂载之前",html模板未渲染
  beforeMount() {

  },

  //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
  mounted() {
    this.startGame();
    this.getKeyPress();
  },

  //生命周期 - 更新之前",数据模型已更新,html模板未更新
  beforeUpdate() {

  },
  //生命周期 - 更新之后",数据模型已更新,html模板已更新
  updated() {

  },
  //生命周期 - 销毁之前",
  beforeDestroy() {

  },
  destroyed() {

  },
  //生命周期 - 销毁完成",
  //如果页面有keep-alive缓存功能，这个函数会触发",
  activated() {

  },
}
</script>

<style lang="scss" scoped>
  .black{
    background-color: black;
  }
  .tetris-content{
    margin: auto auto;
    margin-top: 1rem;
    display: flex;
    border: black 1px solid;
    height: 70vh;
    width: 50vw;
    .content-left{
      width: 70%;
      .left-column{
        display: flex;
        height: calc(100% / 12 - 1px);
        border-bottom: black 1px solid;
        .left-row{
          border-right: black 1px solid;
          width: calc(100% / 12);
        }
      }
      .left-column:last-child{
        height: calc(100% / 12);
        border-bottom: none;
      }
    }
  }
</style>
